<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		 body {
            background: url(img/1.jpg) no-repeat;
        }
        .box {
            height: 165px;
            padding-top: 35px;
            text-align: center;
            background: rgba(255,255,255,0.3);
        }
		</style>
	</head>

	<body>
		<div class="box">
			<a><img src="img/1.jpg" width="200px"></a>
			<a><img src="img/2.jpg" width="200px"></a>
			<a><img src="img/3.jpg" width="200px"></a>
			<a><img src="img/4.jpg" width="200px"></a>
			<a><img src="img/5.jpg" width="200px"></a>

		</div>
		
        <script>
        
        var box = document.getElementsByTagName("div")[0];
      
        var body = document.body;
        var imgArr = box.children;
       
        for(var i=0;i<imgArr.length;i++){
            imgArr[i].index = i;
            imgArr[i].onclick = function () {
                
       body.style.backgroundImage = "url(img/"+(this.index+1)+".jpg)";
             
            }
        }
    </script>
	</body>

</html>